//运营活动详情组件
import React,{Component} from 'react'
import {Table,Icon} from 'antd'
import './collapse.css'


class Collapse extends Component{
  constructor(props){
    super(props)
    this.state={
      // contentdisplay:true,
      // icon:true,
      num:[]
    }
  }
  Transformation=(obj)=>{       //点击转换样式
    let key = 0;
    let newarr =[];
    let arr = this.state.num
    for(let i=0;i<arr.length;i++){
      if(arr[i] == obj){
        arr.splice(i,1);
        key =1;
        break;
      }
    }
    if(key ==0){
      arr.push(obj)
      this.setState({
        num:arr
      })
    }else{
      this.setState({
        num:arr
      })
    }
  }

  dataSource=(data)=>{
    // console.log(data)
    return data.map((val)=>{
      return(
        {
          type:val.type ==1?"买单即享":(val.text ==2?"消费返券":"加入商圈联盟"),
          receive:val.receive,
          use:val.use,
          conversion:val.receive !=0?(val.use/val.receive)*100+'%':0
        }
      )
    })
  }

  getchild=(data)=>{ 
    let columns = [
      {
        title: '投放渠道',
        dataIndex: 'type',
        key: 'type',
      }, {
        title: '已领取',
        dataIndex: 'receive',
        key: 'receive',
      }, {
        title: '已使用',
        dataIndex: 'use',
        key: 'use',
      },
      {
      title: '转化率',
      dataIndex: 'conversion',
      key: 'conversion',
      }
    ]
    let children = data.coupon.map((item,index)=>{
      let dataSource = this.dataSource(item.data_statistics)
      // console.log(dataSource)
      return(
        <div className="collapse_box">
          <div className="collapse_content" style={(()=>{
                    let flag =0;
                    for(let i=0;i<this.state.num.length;i++){
                      if(this.state.num[i] ==item.id){
                        flag =1;
                        break;
                      }
                    }
                    return {backgroundColor:flag?"transparent":"#4C8EDB"}
              })()}>
              <div className="view_title">
                <span>{`优惠券${index+1}`}</span>
              </div>
              <div className="collapse_icon" onClick={()=>this.Transformation(item.id)}  >
                <Icon  type={(()=>{
                      let flag =0;
                      for(let i=0;i<this.state.num.length;i++){
                        if(this.state.num[i] ==item.id){
                          flag =1;
                          break;
                        }
                      }
                      return flag?"down":"up"
                    })()}/>
              </div>
          </div>
          <div className="collapse_shrink" style={(()=>{
                    let flag =0;
                    for(let i=0;i<this.state.num.length;i++){
                      if(this.state.num[i] ==item.id){
                        flag =1;
                        break;
                      }
                    }
                    return {display:flag?"block":"none"}
              })()}>
              <div className="view_linedata">
                <div>券类型</div>
                <div>{item.discount_type ==1?"满减券":(item.discount_type ==2?"满折券":"每满减券")}</div>
              </div>
              <div className="view_linedata">
                <div>券内容</div>
                <div>{item.discount_type ==1?"满"+item.discount_base/100+"减"+item.discount/100:(item.discount_type ==2?"满"+item.discount_base/100+"折"+(item.discount?item.discount/10:0):"每满"+item.discount_base/100+"减"+item.discount/100)}</div>
              </div>
              <div className="view_linedata">
                <div>有效期</div>
                <div>{item.expire_type ==1?"领券"+item.expire_time+"天内有效":(item.expire_type ==2?new Date(item.expire_time * 1000).toLocaleDateString()+"过期":"永不过期")}</div>
              </div>
              <div className="view_linedata">
                <div>发放数量</div>
                <div>{item.limit_type ==1?"不限数量":"限定"+item.quantity+"张(已领取"+item.total_sent+"张)"}</div>
              </div>
              <div className="view_linedata">
                <div>补充说明</div>
                <div>{item.note}</div>
              </div>
              <div className="view_linedata">
                <div>使用时间</div>
                <div>{item.use_type ==1?"营业时间段可使用":"周"+item.use_days}</div>
              </div>
              <div style={{fontSize:"16px",padding:"10px"}}>
                <div>数据统计</div>
                <Table columns={columns} dataSource={dataSource} pagination={false}>
                </Table>
              </div>
          </div>
        </div>
      )
    })
    return children
  }
  render(){

    
    console.log(this.props.viewdata)
    let child =this.getchild(this.props.viewdata)
    return(
      <div>
        {child}
      </div>

    )
  }
}

export default Collapse

